<template>
	<view class="content font_family">

		<!-- 出行人列表 -->
		<view class="people_box" style="background-color: white">
			<view class="item " :class="{active:item.check}" v-for="(item,index) in list" :key="index" @click="people_check(index)">
        <view class="left">
          <view style="display: flex">
            <text class="name">{{item.name}}</text>
            <text class="card">{{item.id_card}}</text>
           <view @click.stop="open(2,item)">
             <u-icon name="edit-pen" ></u-icon>
           </view>
          </view>
          <view class="phone" :class="{'phone-active':item.check}">{{item.tel}}</view>
        </view>

        <view class="check">

          <u-icon v-if="item.check" color="#66936F" size="26" name="checkmark-circle-fill"></u-icon>
          <u-icon v-if="!item.check"  size="26" name="checkmark-circle"></u-icon>
        </view>
<!--				<view class="left f_j">
          <text class="text">{{item.name}}</text>
					<view class="no_check" v-if="!item.check">

					</view>
					<image v-else class="icon" src="../../static/public/checkmark_l.png" mode=""></image>

				</view>-->
<!--				<image @click.stop="open(2,item)" class="icon" src="../../static/public/set.png" mode=""></image>-->
			</view>
      <u-button text="+增加出行人" color="#F2F5FB" custom-style="color:#006CE0;marginTop:30rpx" @click="open(1)"></u-button>

    </view>
		<!-- 确定按钮 -->
		<view class="btn f_zj" @click="travel_people">
			确定
		</view>
		<!-- 弹出层 -->
		<u-popup :show="show" @close="close" round='40rpx'>
			<view class="pop_box f_d f_zj">
				<view class="ipt_box f_j">
					<text class="ipt_left">姓名：</text>
					<u--input placeholder="请输入内容" border="none" v-model="set_data.name"></u--input>
					<image class="icon" src="../../static/public/set.png" mode=""></image>
				</view>
				<view class="ipt_box f_j">
					<text class="ipt_left">电话：</text>
					<u--input placeholder="请输入内容" border="none" v-model="set_data.tel"></u--input>
					<image class="icon" src="../../static/public/set.png" mode=""></image>
				</view>
				<view class="ipt_box f_j">
					<text class="ipt_left">身份证：</text>
					<u--input placeholder="请输入内容" border="none" v-model="set_data.id_card"></u--input>
					<image class="icon" src="../../static/public/set.png" mode=""></image>
				</view>
				<view class="btn_set f_zj" @click="confirm">
					确定
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { traveler_list, add_traveler, edit_traveler } from '@/api/user.js'
	export default {
		data() {
			return {
				people_action: '',
				show: false,
				set_data: {
					name: '',
					tel: '',
					id_card: ''
				},
				list: [],
				type: '',
				set_id: ''
			};
		},
		onLoad() {
			this.get_list()
		},
		methods: {
			...mapMutations(['set_travel_id', 'set_travel_people']),
			people_check(index) {
				this.people_action = index
				this.list[index].check = !this.list[index].check
			},
			open(type, item) {
				this.show = true
				this.type = type
				if (type == 2) {
					this.set_data.name = item.name
					this.set_data.id_card = item.id_card
					this.set_data.tel = item.tel
					this.set_id = item.id
				}
			},
			close() {
				this.show = false
				this.value = ''
			},
			// 获取出行人列表
			get_list() {
				traveler_list().then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.check = false
						})
						console.log(res.data)
						this.list = res.data
					}
				})
			},
			// 确定按钮
			confirm() {
				let username=this.set_data.name;
				if (!this.set_data.name) {
					this.$refs.uToast.show({
						message: '请输入姓名'
					})
					return
				}else{
					 const chineseRegex = /^[\u4e00-\u9fa5]{2,4}$/
					      const englishRegex = /^[a-zA-Z .'-]{2,20}$/
					      
					      if (!chineseRegex.test(username) && !englishRegex.test(username)) {
					        // callback(new Error('请输入合法的姓名'))
							this.$refs.uToast.show({
								message: '请输入合法的姓名'
							})
							return
					      } else {
					        // callback()
					      }
				}
				
				 // console.log(22222);return false;
				
				if (!uni.$u.test.mobile(this.set_data.tel)) {
					this.$refs.uToast.show({
						message: '请输入正确的手机号'
					})
					return
				}
				if (!uni.$u.test.idCard(this.set_data.id_card)) {
					this.$refs.uToast.show({
						message: '请输入正确的身份证号'
					})
					return
				}
				if (this.type == 1) {
					this.add()
				} else {
					this.set()
				}
			},
			// 增加出行人
			add() {
				add_traveler(this.set_data).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.$refs.uToast.show({
							message: res.msg
						})
						this.set_data.name = ''
						this.set_data.id_card = ''
						this.set_data.tel = ''
						this.get_list()
					} else {
						this.$refs.uToast.show({
							message: res.msg
						})
					}
					this.show = false
				})
			},
			// 修改出行人
			set() {
				let obj = this.set_data
				obj.id = this.set_id
				edit_traveler(obj).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							message: res.msg
						})
						this.set_data.name = ''
						this.set_data.id_card = ''
						this.set_data.tel = ''
						this.get_list()
					} else {
						this.$refs.uToast.show({
							message: res.msg
						})
					}
					this.show = false
				})
			},
			// 确定出行人
			travel_people() {
				let arr = []
				let arr1 = []
				this.list.forEach(item => {
					if (item.check) {
						arr.push(item.id)
						arr1.push(item)
					}
				})
				this.set_travel_id(arr)
				this.set_travel_people(arr1)
				if (arr.length == 0) {
					this.$refs.uToast.show({
						message: '请选择出行人'
					})
					return
				}
				uni.navigateBack({
					delta: 1
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.add {
			padding: 50rpx 30rpx;

			.box {
				width: 100%;
				height: 74rpx;
				background: #FFFFFF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;

				.icon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
			}
		}

		.people_box {
      padding: 30rpx;
			.item {
        background-color:#f6f6f6;
        padding: 20rpx;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
				.left {
      .phone{
        color:gray;
        margin-top: 10rpx;
      }
          .phone-active{
            color: #66936F;
          }
					.card{
            padding: 0 20rpx;
          }
				}


			}
      .active{
        background-color: #F3F8F5;
        color: #66936F;
      }
		}

		.btn {
			margin: 0 auto;
			margin-top: 30rpx;
			width: 658rpx;
			height: 84rpx;
			background: black;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
			font-style: normal;
			text-transform: none;
		}
	}

	.pop_box {
		// height: 354rpx;
		padding-top: 20rpx;
    .ipt_left{
      width: 140rpx;
    }
		.ipt_box {
			margin-top: 30rpx;
			width: 658rpx;
			border-bottom: 1rpx solid #D8D8D8;
			padding-bottom: 30rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-left: 20rpx;
			}
		}

		.btn_set {
			margin-top: 50rpx;
			width: 658rpx;
			height: 84rpx;
			background: black;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #fff;
			font-style: normal;
			text-transform: none;
		}
	}
</style>